<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <div class="design">
        <i class="el-icon-plus"></i>
      </div>
      <p>{{ props.config.props.placeholder }} {{ sizeTip }}</p>
    </div>
    <div v-else>
      <el-upload
       v-model:file-list="_value"       
        :limit="props.config.props.maxSize"      
        :multiple="props.config.props.axSize > 0"        
        list-type="picture-card"
        :auto-upload="true"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :before-upload="beforeUpload" 
        :http-request="uploadSignFile" >
        <el-icon><Plus /></el-icon>
        
      </el-upload>
      <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
    </div>
  </div>
</template>

<script setup >
import { ref, computed } from 'vue'
import { FlowUploadFormFile,FlowDeleteFormFile } from '/@/api/workflow/approvalflowUpload';

import FormComponentMixin from "../FormComponentMixin.js";
import {copyField, delField} from "/@/utils/GlobalFunc.js";
import  { ElMessage } from 'element-plus'
const props = defineProps({
  
  ...FormComponentMixin.props
})

const emit = defineEmits([...FormComponentMixin.emits])
const _value = computed(FormComponentMixin.computed._value(props, emit))
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const sizeTip = computed(() => {
  return props.config.props.maxSize > 0 ? `| 每张图不超过${props.config.props.maxSize}MB` : ''
})



const beforeUpload = (file) => {
  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg']
  if (!allowedTypes.includes(file.type)) {
    ElMessage.warning('存在不支持的图片格式')
    return false
  }
  if (props.config.props.maxSize > 0 && file.size / 1024 / 1024 > props.config.props.maxSize) {
    ElMessage.warning(`单张图片最大不超过 ${props.config.props.maxSize}MB`)
    return false
  }
  return true
}
const uploadSignFile = async (file) => { 
	var res = await FlowUploadFormFile(file);
  if(res.data.result?.url){   
    _value.value.map((item)=>{      
        if(item.uid==file.file.uid){
          item.url=res.data.result?.url;
          item.id=res.data.result?.id;
        }      
    })   
  }
  
}
const handleRemove  =  (file) => {
  _value.value.map((item,index)=>{
    if(item.uid==file.uid){   
      var params={id:item.id};   
  
      var res=  FlowDeleteFormFile(params);
      if(res.code==200){
        _value.value.splice(index,1);        
      }else{
         ElMessage.error(res.data.message);
      }
    }
  })   
}

const handlePictureCardPreview  = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}


</script>

<style lang="less" scoped>
.design {
  i {
    padding: 10px;
    font-size: xx-large;
    background: white;
    border: 1px dashed #8c8c8c;
  }
}

:deep(.el-upload--picture-card) {
  width: 80px;
  height: 80px;
  line-height: 87px;
}

:deep(.el-upload-list__item) {
  width: 80px;
  height: 80px;
  .el-upload-list__item-actions {
    & > span + span {
      margin: 1px;
    }
  }
}
</style>